<template>
  <div class="box">
        <div class="box1">
            <div class="box1-1">
                <p> 全部订单</p>
            </div>
            <div class="box1-2">
                <p>积分订单</p>
            </div>
            <div class="box1-3">
                <p>拼团订单</p>
            </div>
            <span></span>
        </div>
        <!-- 订单详情 -->
        <div class="centen">
            <div class="centen1">
                <div class="centen1-1">
                    <img src="/static/imgs_s05/s05_tx.png" alt="">
                    <p>汇方圆</p>
                    <span>积分</span>
                </div>
                <div class="centen1-2">
                    <p>待发货</p>
                </div>
            </div>
            <div class="centen2">
                <div class="centen2-1">
                    <img src="/static/imgs_s05/s05_bz.png" alt="">
                </div>
                <div class="centen2-2">
                    <div class="cente   n2-2-1">
                        <h1>威尔贝鲁 (WELLBER) 婴儿定型枕新生儿U型枕头 彩棉舒适卡通定型枕</h1>
                    </div>

                    <div class="centen2-2-2">
                        <div class="centen3">
                            <p>x1</p>
                        </div>
                        <div class="centen4">
                            <img src="/static/imgs_s05/s05_logo.png" alt="">
                            <p>300积分</p>
                        </div>

                    </div>
                </div>
                <div class="centen5">
                    <p>查看订单</p>
                </div>
            </div>
        </div>

        <div class="centen">
            <div class="centen1">
                <div class="centen1-1">
                    <img src="/static/imgs_s05/s05_tx.png" alt="">
                    <p>汇方圆</p>
                    <span>积分</span>
                </div>
                <div class="centen1-2">
                    <p>待发货</p>
                </div>
            </div>
            <div class="centen2">
                <div class="centen2-1">
                    <img src="/static/imgs_s05/s05_bz.png" alt="">
                </div>
                <div class="centen2-2">
                    <div class="cente   n2-2-1">
                        <h1>威尔贝鲁 (WELLBER) 婴儿定型枕新生儿U型枕头 彩棉舒适卡通定型枕</h1>
                    </div>

                    <div class="centen2-2-2">
                        <div class="centen3">
                            <p>x1</p>
                        </div>
                        <div class="centen4">
                            <img src="/static/imgs_s05/s05_logo.png" alt="">
                            <p>300积分</p>
                        </div>

                    </div>
                </div>
                <div class="centen5">
                    <p>查看订单</p>
                </div>
            </div>
        </div>

        <div class="centen">
            <div class="centen1">
                <div class="centen1-1">
                    <img src="/static/imgs_s05/s05_tx.png" alt="">
                    <p>汇方圆</p>
                    <span>积分</span>
                </div>
                <div class="centen1-2">
                    <p>待发货</p>
                </div>
            </div>
            <div class="centen2">
                <div class="centen2-1">
                    <img src="/static/imgs_s05/s05_bz.png" alt="">
                </div>
                <div class="centen2-2">
                    <div class="cente   n2-2-1">
                        <h1>威尔贝鲁 (WELLBER) 婴儿定型枕新生儿U型枕头 彩棉舒适卡通定型枕</h1>
                    </div>

                    <div class="centen2-2-2">
                        <div class="centen3">
                            <p>x1</p>
                        </div>
                        <div class="centen4">
                            <img src="/static/imgs_s05/s05_logo.png" alt="">
                            <p>300积分</p>
                        </div>

                    </div>
                </div>
                <div class="centen5">
                    <p>查看订单</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            width: 100%;
            background: #CCC;
            /* height: 500px; */
            flex-direction: column;
            padding-bottom: 10px;
        }

        /* 头部单行 */
        .box1 {
            text-align: center;
            display: flex;
            flex-direction: row;
            height: 35px;
            line-height: 35px;
            width: 100%;
            margin-bottom: 10px;
            background: white;
            position: relative;
        }

        .box1-1,
        .box1-3 {
            width: 35%;
            height: 35px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(103, 103, 103, 1);
        }

        .box1-2 {
            width: 30%;
            font-size: 14px;
            font-weight: 500;
            color: rgba(48, 48, 48, 1);
        }

        .box1>span {
            display: inline-block;
            width: 18px;
            height: 2px;
            background: #32B16C;
            position: absolute;
            top: 33px;
            left: 178px;
        }

        /* 订单详情 */
        .centen {
            width: 96%;
            background: white;
            margin: 0 auto;
            border-radius: 3px;
            margin-bottom: 11px;
            height: 175px;
            display: flex;
            flex-direction: column;
        }

        .centen1 {
            display: flex;
            /* justify-content: space-between; */
            flex-direction: row;
            width: 100%;
        }

        .centen1-1 {
            width: 80%;
            /* background: skyblue; */
            height: 40px;
            line-height: 40px;
        }

        .centen1 .centen1-1 img {
            margin-left: 6px;
            margin-top: 5px;
            margin-right: 6px;
            width: 30px;
            height: 30px;
        }

        .centen1-2 {
            width: 20%;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .centen1-1 p {
            position: relative;
            top: -10px;
            display: inline-block;
            width: 40px;
            font-size: 13px;
            font-weight: 500;
        }

        .centen1-1 span {
            text-align: center;
            margin-left: 6px;
            position: relative;
            top: -10px;
            display: inline-block;
            width: 34px;
            height: 14px;
            line-height: 14px;
            background: rgba(0, 160, 233, 1);
            border-radius: 3px;
        }

        .centen1 .centen1-2 p {
            font-size: 13px;
            font-weight: 400;
            color: rgba(236, 105, 65, 1);
        }

        .centen2 {
            display: flex;
            position: relative;
        }

        .centen2 .centen2-1 {
            box-sizing: border-box;
            width: 25%;
            height: 72px;
        }

        .centen2 .centen2-1 img {
            width: 72px;
            height: 72px;
            margin-left: 6px;
        }

        .centen2 .centen2-2 {
            width: 70%;
            height: 72px;
            padding-left: 8px;
        }

        .centen2 .centen2-2 {
            display: flex;
            flex-direction: column;
        }

        .centen2 .centen2-2 .centen2-2-1 {
            display: inline-block;
            width: 238px;
            height: 27px;
        }

        .centen2-2-2 {
            margin-top: 15px;
            display: flex;
            width: 100%;
            height: 11px;
        }

        .centen3 {
            width: 10%;
            height: 11px;
            line-height: 11px;

        }

        .centen4 {
            margin-left: 145px;
            display: flex;
            width: 90%;
            height: 12px;
            line-height: 13px;
            color: #32B16C;
            text-align: right;
            margin-right: 11px;
        }

        .centen4 img {
            margin-right: 3px;
            width: 13px;
            height: 12px;
        }

        .centen5 {
            position: absolute;
            width: 69px;
            height: 29px;
            border: 1px solid #CCC;
            border-radius: 3px;
            bottom: -48px;
            right: 21px;
            text-align: center;
            line-height: 29px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }
    </style>
